<template>
  <div class="all_box_payment">
    <!-- <iframe :src="url"  width="100%" height="800px" border="0"></iframe> -->
    <div class="payment_header">
      <div class="payment_header_area">
        <img src="./wxIcon.png" height="50px" />
        <span>微信支付</span>
      </div>
    </div>
    <div class="payment_div" v-model="order_back">
      <el-row class="amount">
        <div style="text-align: center; margin: 0 auto; font-size: 30px;">￥{{order_back.price}}元</div>
      </el-row>
      <el-row class="payCode_area">
        <img :src=order_back.wxcode class="payCode_img" />
      </el-row>
      <div class="order_area">
        <div>
          订单名称：<span>{{order_back.name}}</span>
        </div>
        <div>
          订单号: <span id="order_code">{{order_back.orderId}}</span>
        </div>
      </div>
      <el-row class="tip">
        <div class="tip-text">
          <img src="./scan.png" height="55px" style="vertical-align: middle;" />
          <span id="showtext">打开微信[扫一扫]</span>
        </div>
      </el-row>
    </div>
  </div>
</template>

<!-- 定义JS变量 -->
<script>
  const axios = require('axios');
  export default {
    name: 'payment',
    created() {
      this.getPaymentInfo()
      this.getOrderFromZZF()
    },
    mounted() {
            this.getPayState();
            this.timer = window.setInterval(() => {
                setTimeout(() => {
                    this.getPayState()
                },0)
            },3000)
        },
    data() {
      return {
        AppKey: '',
        AppSecret: '',
        order_ask: {
          price: this.$route.params.bookPrice,
          name: this.$route.params.bookName,
          reurl: 'http:www.baidu.com',
          thirduid: this.$route.params.userId,
          paytype: 'wx',
          callbackurl: ''
        },
        order_back: {
			orderId: ''
        }
      }
    },
    methods: {
       async getOrderFromZZF() {
        let AppKey = this.AppKey
        let AppSecret = this.AppSecret
        const {
          data: res
        } = await axios.post(`https://admin.zhanzhangfu.com/order/createOrder?price=${this.$route.params.bookPrice}&name=${this.$route.params.bookName}&thirduid=${this.$route.params.userId}&reurl=http://www.baidu.com&paytype=wx&callbackurl=http://www.bing.com`,
        {
          Myname: 'abcd'
        },
        {
            headers:{
              'payment-key': '72f225401fa243e9',
              'payment-secret': '2ca859da0ec94349a3f786f0bcb57d90',
              'Content-Type': 'application/x-www-form-urlencoded'
           }
        })
        console.log("URL------"+`https://admin.zhanzhangfu.com/order/createOrder?price=${this.$route.params.bookPrice}&name=${this.$route.params.bookName}&thirduid=${this.$route.params.userId}&reurl=http://www.baidu.com&paytype=wx&callbackurl=http://www.bing.com`)
        console.log("getOrderFromZZF: "+this.$route.params.bookPrice)
        console.log(res)
        this.order_back = res
      },
      async getPaymentInfo() {
        const {
          data: res
        } = await this.$http.get("/book/getPaymentInfo", {
          params: {
            token: 'jkhsgfdliasgf'
          }
        })
        console.log(res.data)
        this.AppKey = res.data.appkey
        this.AppSecret = res.data.appSecret
      },
	  async getPayState(){
		  const {
		    data: res
		  } = await axios.post(`https://admin.zhanzhangfu.com/order/onlinePayFindResult?orderId=${this.order_back.orderId}`,
		  {
		    Myname: 'abcd'
		  },
		  {
		      headers:{
		        'payment-key': '72f225401fa243e9',
		        'payment-secret': '2ca859da0ec94349a3f786f0bcb57d90'
		        // 'Content-Type': 'application/x-www-form-urlencoded'
		     }
		  })
		  console.log(res)
      if(res.code == '10001'){
        this.$message.success("支付成功! 正在跳转下载页面...")
        window.clearInterval(this.timer)
        let addr = this.$route.params.downAddr
        console.log("下载地址"+this.$route.params.downAddr)
        // this.$router.push({ name: 'searched',params:{userId:window.sessionStorage.getItem('userId')} })
        setTimeout(function(){
          window.open(addr,'_blank')
          // this.$router.push('/login')
        },1000)
      }
	  }
    },
	destroyed() {
	        window.clearInterval(this.timer)
	    }

  }
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
  .all_box_payment {
    background: #f7f7f7;
    height: 100%;

    .payment_header {
      background-color: white;
      width: 600px;
      margin: 0 auto;
      border-bottom: 1px solid #ddd;

      .payment_header_area {
        line-height: 70px;
        vertical-align: middle;
        width: 170px;
        margin: 0 auto;

        img {
          vertical-align: middle;
        }
      }

    }

    .payment_div {
      background-color: white;
      width: 600px;
      margin: 0 auto;
      margin-top: 80px;
      border: 1px solid #e5e5e5;
      border-top: none;

      .amount {
        font-size: 40px;
      }

      .payCode_area {
        .payCode_img {
          height: 250px;
          margin: 0 auto;
          display: block;
        }

      }

      .order_area {
        div {
          text-align: center;
          font-family: "微软雅黑";
          font-size: 12px;
          margin: 5px 0;
          padding-bottom: 2px;

          #order_code {
            font-weight: bolder;
          }
        }
      }

      .tip {
        .tip-text {
          line-height: 60px;
          vertical-align: middle;
          width: 185px;
          margin: 0 auto;
        }
      }
    }
  }
</style>
